import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import styles from './header.module.less'
import logo from '../../assets/images/avatar.jpg'
import { menuList } from '../../config/menuConfig'
import { MobileOutlined, DiffOutlined, BellOutlined, UserOutlined, Html5TwoTone } from '@ant-design/icons'
import { Menu, Button, Badge, Dropdown  } from 'antd';
import  NewsList  from './newsList/newsList';
import UserDropDown from './userDrop/userDropDown';

function HeaderNav(props) {
    const { onClick, onSignOut } = props
    let { pathname } = useLocation()
    let activeIndex = pathname
    let arr = menuList.map(item => item.key)    
    let token = localStorage.getItem("token"), menuItem
    menuItem = [3, 4].map((item, index) => {
        if (token) {
                return (
                    <Menu.Item className={styles["menulist1"]} key={item}>
                       
                            {
                                index == 0 ? (
                                <Dropdown overlay={NewsList} placement="bottomRight" trigger={['click']}>
                                    <Button type="link" icon={<BellOutlined style={{ fontSize: 20 }} />}  ></Button>
                                </Dropdown>
                                ) : (
                                <Dropdown overlay={<UserDropDown onClick={onSignOut} />} placement="bottomRight" trigger={['click']}>
                                    <Button type="link" icon={<UserOutlined style={{ fontSize: 20 }} />}  ></Button>
                                </Dropdown>)
                            }
                        {
                            index == 0 ? <Badge dot offset={[-18, -10]}></Badge> : ""
                        }
                    </Menu.Item>
                )
            }else{
                return (
                    <Menu.Item className={styles["menulist1"]} key={item}>
                        {index == 0 ? <Button type="link" onClick={onClick}>注册</Button> : <Button type="link" onClick={onClick}>登录</Button>}
                    </Menu.Item>
                )
            }
            
        })

    return (
        <div className={styles["header"]}>
            <Menu
                selectedKeys={[arr]}
                defaultOpenKeys={[activeIndex]}
                className={styles["menu"]}
                mode="horizontal"
            >
                <Menu.Item key="/" className={styles["menulist"]}>
                    <Link to="/" >
                        <Html5TwoTone style={{ fontSize: "20px" }} twoToneColor="#52c41a" />
                    </Link>
                </Menu.Item>
                {
                    menuList.reduce((prep, item) => {
                        prep.push(
                            <Menu.Item key={item.key} className={styles["menulist"]} >
                                <Link to={item.key} >{item.title}</Link>
                            </Menu.Item>
                        )
                        return prep
                    }, [])
                }
            </Menu>
            <div className={styles["nav-right"]}>
                <Button type="primary" ghost>Plus 会员</Button>
                <Button type="primary" ghost>我是面试官</Button>
            </div>
            <Menu
                selectedKeys={[1, 2, 3, 4]}
                className={styles["menu1"]}
                mode="horizontal"
            >
                <Menu.Item className={styles["menulist1"]} key={1}>
                    <Link to="/app" >
                        <MobileOutlined style={{ fontSize: 20,color:"blue" }}/>
                    </Link>
                </Menu.Item>

                <Menu.Item className={styles["menulist1"]} key={2}>
                    <Button type="link" icon={<DiffOutlined style={{ fontSize: 20 }} />}  ></Button>
                </Menu.Item>
                {
                    menuItem
                }
                
            </Menu>
        </div>

    )
}

export default HeaderNav